<template>
  <view class="data-component">
    <!-- 数据区域 -->
    <view class="topSection">
      <!-- 分割线 -->
      <!-- 金额展示 -->
      <view class="moneyWrap">
        <view class="u-font-md">{{txtObj.topTxt}}</view>
        <view class="money">
          <text class="moneyNum">{{type==1?cardData.totalHelpSellOrderAmount:cardData.totalHelpSellCommission}}</text>
          <text>元</text>
        </view>
      </view>
      <!-- 分割线 -->
      <!-- 各项数据 -->
      <view class="dataWrap">
        <view class="dataItem">
          <view class="itemTxt">{{txtObj.itemTxt1}}</view>
          <view class="itemNum">
            <text class="num">{{type==1?cardData.todayHelpSellOrderAmount:cardData.todayHelpSellCommission}}</text>
            <text>{{txtObj.unit1}}</text>
          </view>
        </view>
        <view class="dataItem">
          <view class="itemTxt">{{txtObj.itemTxt2}}</view>
          <view class="itemNum">
            <text class="num">{{type==1?cardData.todayHelpSellOrderCount:cardData.todayHelpSellOrderAmount}}</text>
            <text>{{txtObj.unit2}}</text>
          </view>
        </view>
        <view class="dataItem">
          <view class="itemTxt">{{txtObj.itemTxt3}}</view>
          <view class="itemNum">
            <text class="num">{{type==1?cardData.newHeadCount:cardData.todayHelpSellOrderCount}}</text>
            <text>{{txtObj.unit3}}</text>
          </view>
        </view>
      </view>
    </view>
    <!-- 分割线 -->
    <!-- 按钮区域 -->
    <view class="bottomSection">
      <view class="txt">{{txtObj.bottomTxt}}</view>
      <view class="btnWrap">
        <!-- 已登录按钮 -->
        <template v-if="isLogin">
          <button v-if="type==1" hover-class='hover' class="btn" @click.stop="$emit('handleInvite')">
            {{txtObj.bottomBtn}}
          </button>
          <button v-else open-type="share" hover-class='hover' class="btn" id="handleInvite">{{txtObj.bottomBtn}}</button>
        </template>
        <!-- 未登录按钮 -->
        <button v-else hover-class='hover' class="btn" @click.stop="navigateTo({url: '/pagesB/login/index'})">
          {{txtObj.bottomBtn}}
        </button>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'dataComponent',
  props: {
    type: {
      type: [String, Number], // type-->1:我的帮卖，2:我的供货
      default: 1
    },
    cardData: {
      type: Object,
      required: true,
      default: () => {}
    }
  },
  // data() {
  //   return {
  //     domHeight: 241
  //   }
  // },
  computed: {
    // 帮卖文案
    txtObj() {
      const obj = {
        topTxt: '帮卖累计销售',
        bottomTxt: '人多卖更多，快去邀请好友来帮卖！',
        bottomBtn: '邀请帮卖',
        itemTxt1: '今日已卖',
        itemTxt2: '今日订单',
        itemTxt3: '新增帮卖',
        unit1: '元',
        unit2: '个',
        unit3: '人',
      }
      if (this.type == 2) {
        obj.topTxt = '我已获得佣金'
        obj.bottomTxt = '货多赚更多，快去邀请卖家来供货！'
        obj.bottomBtn = '邀请供货'
        obj.itemTxt1 = '今日佣金'
        obj.itemTxt2 = '今日已卖'
        obj.itemTxt3 = '今日订单'
        obj.unit2 = '元'
        obj.unit3 = '个'
      }
      return obj
    },
  },
  // async mounted() {
  //   const { height } = await this.getUNavbarHeight('.data-component')
  //   this.domHeight = height
  // }
}
</script>

<style lang="scss" scoped>
.data-component {
  box-sizing: border-box;
  width: 100%;
  padding: 32rpx;
  background-color: #FFFFFF;
  .topSection {
    width: 100%;
    height: 322rpx;
    padding: 32rpx;
    border-radius: 16rpx;
    color: #ffffff;
    background: linear-gradient(90deg, #E44435 0%, #F95D4F 100%);
    .moneyWrap {
      width: 100%;
      height: 144rpx;
    }
    .money {
      margin: 24rpx 0 0;
    }
    .moneyNum {
      font-size: 48rpx;
      font-weight: 600;
    }
    .dataWrap {
      display: flex;
      width: 100%;
      height: 114rpx;
      padding: 32rpx 0 0;
    }
    .dataItem {
      width: 33.3333%;
      height: 100%;
    }
    .itemTxt {
      margin: 0 0 8rpx;
      font-size: 24rpx;
      line-height: 34rpx;
      opacity: 0.7;
    }
    .num {
      font-size: 28rpx;
      line-height: 40rpx;
      font-weight: 500;
    }
  }
  .bottomSection {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 96rpx;
    padding: 0 24rpx;
    border-radius: 16rpx;
    background: linear-gradient(90deg, #E44435 0%, #F95D4F 100%);
    box-shadow: inset 0 2rpx 0 rgba(255, 255, 255, 0.1);
    .txt {
      font-size: 28rpx;
      line-height: 40rpx;
      color: #ffffff;
    }
    .btn {
      //width: 128rpx;
      height: 48rpx;
      padding: 0 16rpx;
      font-size: 24rpx;
      line-height: 48rpx;
      border-radius: 32rpx;
      color: $n9Color;
      background: linear-gradient(90deg, #FDEDC7 0.12%, #FEDFA6 100%);
    }
  }
}
</style>